  <div class="mask-white" id="main">
    <button class="search-back" v-on:click="hide">取消</button>
    <header class="equip-head">
      <form v-on:submit="submit" action="gearList">
        <button class="lens" type="button" v-on:click="submit"></button>
        <input type="text" v-model="keywords" maxlength="50" id="read-search" name="w" autocomplete="off" placeholder="搜索你想要的装备">
        <a class="measure" href="joggers://gearAdvisor"><i></i>测一测</a>
        <!-- <a class="me" href="joggers://gearStore" style="display: none"><i class="me"></i>我的</a> -->
      </form>
    </header>
    <!-- 没有搜索到相关视频 -->
    <ul class="analogy color_gray f12" v-show="suggest.length">
      <li class="omit" v-for="item in suggest" v-html="item.name" v-on:click="search(item.name)"></li>
    </ul>
    <!-- 搜索提示 -->
    <section class="hot-search line-gray">
        <h1><i class="ico-hot"></i>热门搜索</h1>
        <div>
            <span v-for="item in hotSearch" v-text="item" v-on:click="search(item)"></span>
        </div>
    </section>
    <!-- 热门搜索 -->
    <section class="hot-search ac" v-if="history.length">
        <h1><i class="ico-ssls"></i>搜索历史</h1>
        <div class="line-gray pb15">
            <span v-for="item in history" v-text="item" v-on:click="search(item)"></span>
        </div>
        <p class="p10 ac f12" v-on:click="alertClear"><i class="ico-delete"></i>清空搜索历史</p>
    </section>
    <section class="hot-search ac" v-else>
        <h1 class="al"><i class="ico-ssls"></i>搜索历史</h1>
        <img class="text-img" src="/static/images/text/myssls.png">
        <img src="/static/images/bg/image1_03-min.png">
    </section>
    <!-- 搜索历史 -->
  </div>
<script src="/static/js/vue-2.min.js"></script>
<script>
new Vue({
  el: '#main',
  data: {
    keywords: '',
    suggest: [],
    hotSearch: [],
    history: [],
    loading: false
  },
  created: function(){
    var self = this
    //hotsearch
    $.getJSON('/gearWeb/hotSearch',function(data){
      if(typeof data.error != 'undefined'){
        return
      }
      self.hotSearch = data.result
    })
    
    //history
    var history = localStorage.gearSearchHistory
    if(history){
      this.history = JSON.parse(history)
    }
  },
  watch:{
    keywords: function(val, oldVal){
      if(val == '' || this.loading){
        return
      }
      this.loading = true
      var self = this
      $.getJSON('/gearWeb/searchSuggest',{keywords:val},function(data){
        self.suggest = data.result
        self.loading = false
      })
    }
  },
  methods:{
    alertClear: function(){
      if(confirm('确定要清空？')){
        this.clear()
      }
    },
    clear: function(){
      this.history = []
      localStorage.gearSearchHistory = '[]'
    },
    search: function(keywords){
        if(!keywords||keywords.length==0){
            return
        }
        keywords = keywords.replace(/<[^>]+>/g,"")
        keywords = keywords.replace("(","")
        keywords = keywords.replace(")","")
        keywords = keywords.replace("\\'s","")

        this.keywords = keywords
        this.submit()
    },
    submit: function(){
      if(this.keywords.length == 0)
        return;

      this.history.splice(0,0,this.keywords)
      localStorage.gearSearchHistory = JSON.stringify(this.history)
      window.location="/show/gearList?w="+this.keywords;
    },
    hide: function(){
      $(".mask-white").hide();
    }
  }
})

</script>

